<template>
  <su-popup :show="_show" @close="_show = false">
    <view class="model-box">
      <view class="title-box">
        <view class="title">
          {{ title }}
        </view>
        <text class="close iconfont icon-a-ziyuan14" @tap.stop="_show = false" />
      </view>
      <uni-search-bar
        v-model="wheres.slocationcode.value"
        class="ss-flex-1 search-box"
        :radius="5"
        placeholder="搜索"
        cancel-button="none"
        @clear="onClear"
        @confirm="onSearch"
      />
      <scroll-view
        style="height: 60vh;"
        scroll-y
        :scroll-with-animation="false" 
        :enable-back-to-top="true"
        :refresher-enabled="true"
        :refresher-threshold="20"
        :refresher-triggered="trigger"
        @refresherrefresh="refresherrefresh"
        @scrolltolower="onBottom"
      >
        <s-empty v-if="state.pagination.total === 0" text="暂无数据" />
        <view v-if="!isEmpty(state.pagination.list)" class="ss-p-20">
          <view v-for="item in state.pagination.list" class="ss-flex ss-col-center ss-p-y-20" @tap.stop="onClick(item)">
            <uni-icons v-if="item.slocationcode === _defaultValue" color="var(--ui-BG-Main)" type="circle-filled" size="28" />
            <uni-icons v-else type="circle" color="var(--ui-BG-Main)" size="28" />
            <view class="ss-font-32 ss-m-l-20">
              {{ item.slocationcode }}
            </view>
          </view>
        </view>
        <!-- 加载更多 -->
        <uni-load-more
          v-if="state.pagination.total > 0"
          :status="state.loadStatus"
          :content-text="{
            contentdown: '上拉加载更多'
          }"
          @tap="loadmore"
        />
      </scroll-view>
    </view>
  </su-popup>
</template>

<script setup>
/**
 *
 * 标题栏
 *
 * @property {String} title 				- 标题
 * @property {String} subTitle 				- 副标题
 * @property {Number} height 				- 高度
 * @property {String} Type = [left | right | center | between]					- 样式
 *
 */
import { computed, onMounted, reactive, watch, ref } from 'vue'
import sheep from '@/sheep'
import { isEmpty, isArray, cloneDeep, concat, isNumber } from 'lodash-es'
const pagination = {
  list: [],
  pageNo: 1,
  total: 1,
  pageSize: 20
}
// 数据
const state = reactive({
  triggered: false,
  keyword: null,
  pagination: {
    list: [],
    pageNo: 1,
    total: 1,
    pageSize: 20
  },
  loadStatus: ''
})

// 接收参数
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: null
  },
  title: {
    type: String,
    default: '标题'
  },
  defaultValue: {
    type: [String, Object],
    default: null
  },
  swarehousecode: {
    type: String,
    default: null
  }
})

const defaultWheres = {
  slocationcode: {
    value: '',
    displaytype: 'like'
  }
}
const wheres = ref(cloneDeep(defaultWheres))

const emit = defineEmits(['update:modelValue', 'change'])
const _show = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})
const _defaultValue = ref(props.defaultValue)
const getList = async(pageNo = 1, pageSize = 20) => {
  if (!props.swarehousecode) {
    sheep.$helper.toast('请先选择仓库')
    state.pagination = pagination
    return
  }
  const res = await sheep.$api.common_warehouse.getLocation(
    {
      swarehousecode: props.swarehousecode
    },
    {
      pageNo,
      pageSize,
      wheres: sheep.$helper.handleWheres(wheres.value)
    }
  )
  if (res.code === 0) {
    if (pageNo === 1) {
      state.pagination.list = []
    }
    const { total, list } = res.data
    let newList = concat(state.pagination.list, list)
    state.pagination = {
      pageNo,
      total,
      pageSize,
      list: newList
    }
    if (state.pagination.total > state.pagination.list.length) {
      state.loadStatus = 'more'
    } else {
      state.loadStatus = 'noMore'
    }
  }
}

let trigger = ref(false) // 初始情况下，关闭刷新状态

const onSearch = async() => {
  state.pagination = pagination
  await getList()
}
const onClear = async() => {
  wheres.value = cloneDeep(defaultWheres)
  state.pagination = pagination
  await getList()
}
// 加载更多
function loadmore() {
  if (state.loadStatus !== 'noMore') {
    getList(state.pagination.pageNo + 1)
  }
}

// 上拉刷新
const refresherrefresh = async() => { 
  trigger.value = true // 开启状态
  state.pagination = pagination
  await getList()
  trigger.value = false
}

const onBottom = () => {
  loadmore()
}

watch(
  () => _show.value,
  (val) => {
    if (val) {
      getList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)

const onClick = (item) => {
  _defaultValue.value = item.slocationcode
  emit('change', item.slocationcode)
  _show.value = false
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.model-box {
}
.title-box {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	.title {
		width: 70%;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.close {
		position: absolute;
		right: 35rpx;
		font-size: 25rpx;
		top: 50%;
		transform: translateY(-50%);
	}
}
.model-content {
	border: 1px solid #000;
}
</style>
